<script>
import UniPopup from "../../../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import { getShowImage, showModal, valIsEmpty } from "@/utils";
import vocabularyDetail from "../../../../../../components/vocabularyDetail.vue";
import title from "../../title.vue";
import common from "../../common";
import answerRecord from "../answerRecord.vue";
import analysisVideo from "../../analysisVideo.vue";
import numberUtils from "../../../../../../utils/numberUtils";
import answerSheet from "./answerSheet.vue";
import analysis from "./analysis.vue";
import controlBar from "../controlBar.vue"
export default {
  name: "paragraphsSort",
  components: {
    UniPopup,
    vocabularyDetail,
    title,
    answerRecord,
    analysisVideo,
    answerSheet,
		analysis,
		controlBar,
  },
  data() {
    return {
      common,
      questionList: [], //题目列表
      renderQuestionList: [], //过滤了非题目类型的列表
      textList: [], //文章段落内容
      details: {}, //题目详情
      currentQuestionIndex: 0, //当前题目索引
      isVip: false,
    };
  },
  created() {
    //初始化数据
    this.isVip = this.root.isVip;
    this.questionList = this.root.details.paragraphsSort.questionList;
    //筛选里面的问题类型
    this.renderQuestionList = [];
    for (let questionListElement of this.questionList) {
      if (questionListElement.contentType === "TOPIC") {
        this.renderQuestionList.push(questionListElement);
      }
    }
    this.textList = this.root.details.paragraphsSort.textList;
    //寻找问题里的段落
    if (this.viewAnalysis) {
      for (let i = 0; i < this.questionList.length; i++) {
        const question = this.questionList[i];
        for (let j = 0; j < this.textList.length; j++) {
          const text = this.textList[j];
          if (text.mark === question.answer) {
            question.paragraph = text;
          }
        }
      }
    }
    this.details = this.root.details;
  },
  props: {
    viewAnalysis: Boolean,
  },
  methods: {
    getShowImage,
    //打开答题卡
    openAnswerSheet() {
      this.$refs["answer-sheet"].open();
    },
    //提交作答
    async submit() {
      //是否还有未做的题目
      let unAnswer = false;
      //计算总题数，答对题数，答错题数，未答题数，本次答题得分
      const userDoTopicScore = {
        totalTopicNum: this.renderQuestionList.length,
        rightTopicNum: 0,
        errorTopicNum: 0,
        noDoNum: 0,
        score: 0,
        isCalculateScore: 1, //评分
      };
      for (let question of this.renderQuestionList) {
        //做对了
        if (question.doRight) {
          userDoTopicScore.rightTopicNum++;
          //计算分数
          userDoTopicScore.score = numberUtils.preciseAdd(
            userDoTopicScore.score,
            question.questionScore,
          );
        } else {
          //没有做
          if (valIsEmpty(question.userAnswer)) {
            userDoTopicScore.noDoNum++;
            //做错了
          } else {
            userDoTopicScore.errorTopicNum++;
          }
        }
        //处理待提交的数据
        question.questionSerialNum = question.serialNum;
        //检查是否有未作答的题目
        if (!question.userAnswer) {
          unAnswer = true;
        }
      }
      if (unAnswer) {
        if (
          !(await showModal({
            title: "提示",
            content: "还有题目未作答，是否确认提交？",
            confirmText: "确认提交",
            cancelText: "继续作答",
          }))
        ) {
          //打开答题卡
          this.$refs["answer-sheet"].open();
          this.$refs.answerRecord.open(this.renderQuestionList);
          return;
        }
      }
      //提交答案
      this.$emit("submit", {
        questionList: this.renderQuestionList,
        userDoTopicScore,
      });
    },
  },
  inject: ["root"],
  provide() {
    return {
      parent: this,
    };
  },
};
</script>

<template>
  <view class="component">
    <title :topic-name="details.topicName"></title>
    <!--		题干-->
    <view
      class="topic-paragraph-item"
      v-if="details.topicStem"
      v-html="details.topicStem"
    ></view>
    <!--		文章段落内容-->
    <view class="text-list">
      <!--			做题模式-->
      <template v-if="!viewAnalysis">
        <block v-for="paragraph in textList" :key="paragraph.id">
          <view class="paragraph-item">
            <!--					段落选项mark-->
            <view class="text mark">{{ paragraph.mark }}.</view>
            <block v-for="item in paragraph.contentList" :key="item.index">
              <!--					文本类型-->
              <text
                class="text"
                v-if="item.contentType === 'TEXT'"
								@click="$refs.vocabularyDetail.open(item.content)"
                :user-select="true"
                >{{ item.content }}</text
              >
              <!--					重点词汇-->
              <text
                class="vocabulary"
                @click="$refs.vocabularyDetail.open(item.content)"
                v-else-if="item.contentType === 'MAIN_VOCABULARY'"
                >{{ item.content }}</text
              >
            </block>
          </view>
        </block>
      </template>
      <!--			查看解析模式-->
      <template v-else>
        <block v-for="question in questionList" :key="question.questionId">
          <view class="paragraph-item">
            <!--					段落选项mark-->
            <view class="text mark">{{ question.paragraph.mark }}.</view>
            <block
              v-for="item in question.paragraph.contentList"
              :key="item.index"
            >
              <!--					文本类型-->
              <text
                class="text"
                v-if="item.contentType === 'TEXT'"
                :user-select="true"
                >{{ item.content }}</text
              >
              <!--					重点词汇-->
              <text
                class="vocabulary"
                @click="$refs.vocabularyDetail.open(item.content)"
                v-else-if="item.contentType === 'MAIN_VOCABULARY'"
                >{{ item.content }}</text
              >
            </block>
          </view>
          <!--				段落翻译-->
          <view
            class="paragraph-translate"
            v-if="viewAnalysis && question.paragraph.trans"
            >{{ question.paragraph.trans }}</view
          >
          <!--			选择了该段落的题目解析-->
          <view class="question-analysis">
            <view>{{ question.serialNum + "." }}</view>
						<analysis :current-question="question"></analysis>
          </view>
        </block>
      </template>
    </view>
    <view class="placeholder"></view>
    <!--		底部控制按钮-->
		<control-bar :view-analysis="viewAnalysis" @open-answer-sheet="openAnswerSheet" @submit="submit"></control-bar>
    <!--		答题卡弹框-->
    <view class="popup-placeholder"></view>
    <answerSheet
      :view-analysis="viewAnalysis"
      ref="answer-sheet"
      @submit="submit"
      :current-question-index.sync="currentQuestionIndex"
    ></answerSheet>
    <vocabularyDetail ref="vocabularyDetail"></vocabularyDetail>
    <!--		题目一览-->
    <answerRecord
      ref="answerRecord"
      :view-analysis="viewAnalysis"
      @change="(index) => (currentQuestionIndex = index)"
    ></answerRecord>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  .topic-paragraph-item {
    font-size: calc(32rpx * var(--font-size-rate));
    line-height: 2;
    margin-top: 20rpx;
  }
  .text-list {
    padding: 30rpx 0;
    .paragraph-item {
      &:not(:first-child) {
        margin-top: 40rpx;
      }
      display: flex;
      flex-wrap: wrap;
      font-size: calc(34rpx * var(--font-size-rate));
      line-height: 2;
      .topic {
        text-decoration: underline;
        &.hasNotDo {
          background: var(--theme-color);
        }
        &.hasDo {
          background: #bad3e7;
        }
        &.correct {
          background: #88debc;
        }
        &.incorrect {
          background: #ff9c9c;
        }
      }
      .vocabulary {
        color: var(--text-color-theme);
        text-decoration: underline;
      }
      .text {
        display: inline-block;
        //识别空格
        white-space: pre-wrap;
      }
      .mark {
        color: var(--text-color-theme);
        font-weight: bold;
        margin-right: 20rpx;
      }
    }
    .paragraph-translate {
      margin-top: 10rpx;
      font-size: calc(32rpx * var(--font-size-rate));
      //color: var(--text-color-light);
			background: var(--theme-color-light);
      line-height: 2;
      padding: 0 20rpx;
      border: 4rpx solid var(--border-color);
      border-radius: 16rpx;
    }
    .question-analysis {
      margin-top: 10rpx;
      border: 4rpx solid var(--text-color-theme);
      font-size: calc(32rpx * var(--font-size-rate));
      padding: 0 20rpx;
      line-height: 2;
      border-radius: 16rpx;
    }
  }
  > .placeholder {
    height: calc(150rpx + env(safe-area-inset-bottom));
  }
  .popup-placeholder {
    height: 550rpx;
  }
}
</style>
